<template>
 <div class="container">
    <el-card>
      <el-form :inline="true">
          <el-form-item label="学科名称">
    <el-input v-model="input" type="text"></el-input>
  </el-form-item>
            <el-form-item>
    <el-button @click="cleanFn">清除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="getList">搜索</el-button>
  </el-form-item>
  <el-form-item type="flex">
    <el-button icon="el-icon-edit" type="success" @click="isShow" >新增学科</el-button>
  </el-form-item>
        <el-row>
          <el-alert
            type="info"
            :closable="false"
            :title="`数据一共${counts}条`"
            show-icon
            >
          </el-alert>
        </el-row>
        <el-table
          :data="SubjectList"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            >
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称"
            >
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            >
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="155px"
            >
            <template slot-scope="{ row }">
              {{ row.addDate | parseTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            >
            <template slot-scope="{ row }">
              <span>{{row.isFrontDisplay == 1 ? '是' : '否'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            >
          </el-table-column>
          <el-table-column
            prop="tags"
            label="标签"
            >
          </el-table-column>
          <el-table-column
            prop="totals"
            label="题目数量"
            >
          </el-table-column>
          <el-table-column
            label="操作"
            width="220px"
            >
            <template slot-scope="scope">
              <el-button @click="objClass(scope.row)" type="text" size="small">学科分类</el-button>
              <el-button @click="objTags(scope.row)" type="text" size="small">学科标签</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small" >修改</el-button>
              <el-button @click="deleteobj(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="1"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="10"
            layout="total, prev, pager, next,sizes, jumper"
            :total="counts">
          </el-pagination>
        </el-row>
      </el-form>
    </el-card>
    <!-- 修改 -->
     <!-- 弹出层 -->
    <el-dialog  :visible="show" @close="btnCancle" :title="list.id?'修改学科':'新增学科'">
      <el-form ref="formdata" label-width="120px" :model="list">
        <el-form-item label="学科名称" prop="subjectName" >
          <el-input ref="inp"  v-model="list.subjectName" placeholder="请输入学科名称"/>
        </el-form-item>
        <el-form-item label="是否显示">
          <!-- 1为激活，0位不激活 -->
          <el-switch
          v-model="value"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="change($event)"/>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="8">
          <el-button size="mini" type="primary" @click="btnOK()">确定</el-button>
          <el-button size="mini" @click="btnCancle()">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
 </div>
</template>

<script>
import { lists, update, remove, detail, add } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      counts: 0,
      show: false,
      value: '1',
      page: 1,
      pagesize: 10,
      input: '',
      list: {},
      SubjectList: [{
        subjectName: '', // 学科名称
        addDate: '', // 创建时间
        username: '', // 创建者
        isFrontDisplay: '', // 前台是否显示
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        totals: '' // 题目数量
      }]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    isShow () {
      this.show = true
    },
    // switch开关 @change可以传值$event就是switch的当条信息值，state为参数，还可以再添加index表示当前列表的序号
    change (e) {
      this.list.isFrontDisplay = e
    },
    handleCurrentChange (newPage) {
      // newPage是当前点击的页码
      // console.log('handleCurrentChange');
      this.page = newPage
      this.getList()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getList()
    },
    // 修改
    async handleClick (row) {
      const { data } = await detail(row)
      this.list = data
      this.show = true
    },
    // 清除
    cleanFn () {
      this.input = ''
      this.getList()
    },
    // 确定
    async btnOK () {
      try {
        await this.$refs.formdata.validate()
        if (this.list.id) {
          // 有id 为编辑
          await update(this.list)
        } else {
          // 无id 为新增
          await add({
            subjectName: this.list.subjectName,
            isFrontDisplay: this.value
          })
        }
        this.getList()
        this.$message.success('操作成功')
        this.show = false
      } catch (err) {
        console.log(err)
      }
    },
    // 取消
    btnCancle () {
      this.$refs.formdata.resetFields()
      this.list = {
        subjectName: '',
        id: ''
      }
      this.show = false
    },
    // 学科分类
    objClass (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科标签
    objTags (row) {
      console.log(row)
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 删除  二次确认 不可逆
    async deleteobj (row) {
      try {
        await this.$confirm('are you sure?')
        await remove(row)
        this.getList()
        this.$message.success('删除角色成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 获取所有科目数据
    async getList () {
      const { data } = await lists({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.input
      })
      this.counts = data.counts
      this.SubjectList = data.items
    }
  }
}
</script>

<style scoped >

</style>
